<template>
  <div class="m-istyle">
    <dl @mouseover="over" :class="nav.class">
      <dt>{{ nav.title }}</dt>
      <dd
        v-for="(item, index) in nav.list"
        :key="index"
        :class="{active: kind == item.tab}"
        :data-type="item.tab"
      >{{ item.text }}</dd>
    </dl>
    <ul class="ibody">
      <li v-for="(item, index) in resultsDate[kind]" :key="index">
        <el-card :body-style="{ padding: '0px'}" shadow="never">
          <img :src="item.image" class="img" />
          <div class="cbody">
            <div class="title" :title="item.title">{{ item.title }}</div>
            <div class="sub-title" :title="item.sub_title">{{ item.sub_title }}</div>
            <div class="price-info">
              <span class="current-price-wrapper">
                <span class="price-symbol numfont">¥</span>
                <span class="current-price numfont">{{ item.price }}</span>
                <span class="sold bottom-right-info">{{ item.address }}</span>
              </span>
              <!-- <span class="old-price">门市价¥{{ item.price_info.old_price }}</span>
              <span class="sold bottom-right-info">{{ item.address }}</span> -->
            </div>
            <!-- <div class="price-info" v-else-if="!item.rentNum">
              <span class="current-price-wrapper">
                <span class="price-symbol numfont">¥</span>
                <span class="current-price numfont">抢光了</span>
              </span>
            </div>
            <div class="price-info" v-else>
              <span class="current-price-wrapper">
                <span class="price-symbol numfont">¥</span>
                <span class="current-price numfont">{{ item.price_info.avg_price }}</span>
                <span class="units">/{{ item.price_info.units }}</span>
              </span>
            </div> -->
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script>
import api from '@/api/index.js';

export default {
  data() {
    return {
      kind: "all",
      // list: [
      //   {
      //     img:
      //       "https://img.meituan.net/phoenix/93161f642813518f3f67f2ca11c5c4d3274794.jpg@740w_416h_1e_1c",
      //     title: "五大道旧址一居大床房",
      //     sub_title: "整套1居室·可住2人 |",
      //     price_info: {
      //       current_price: null,
      //       old_price: null,
      //       avg_price:18,
      //       units:'人均',
      //     },
      //     rentNum: 10,
      //     address: "五大道"
      //   },
      //   {
      //     img:
      //       "https://img.meituan.net/phoenix/5c989f72d86fa5cbde6ed37581662050633214.jpg@740w_416h_1e_1c",
      //     title: "【九月美宿】/浮生若梦/鼓楼/古文化街/观天津之眼全景/100寸投影",
      //     sub_title: "整套1居室·可住2人 |",
      //     price_info: {
      //       current_price: 98,
      //       old_price: 36
      //     },
      //     rentNum:10,
      //     address: "老城厢/鼓楼"
      //   },
      //   {
      //     img:
      //       "https://img.meituan.net/phoenix/9096ac7cc7fd95c6400bbd0cfa27b7dc3613025.jpg@740w_416h_1e_1c",
      //     title:
      //       "【青果美宿】日式•和风/可观天津之眼全景/100寸投影/古文化街/鼓楼",
      //     sub_title: "整套1居室·可住2人 |",
      //     price_info: {
      //       current_price: 168,
      //       old_price: 36,
      //       avg_price:null,
      //       units:null,
      //     },
      //     rentNum:10,
      //     address: "老城厢/鼓楼"
      //   }
      // ],
      resultsDate:{

      },
    };
  },
  props: ["nav"],
  created() {
    api.getResultProducts().then((res) => {
      this.resultsDate = res.data.data;
    })
  },
  methods: {
    over(e) {
      let dom = e.target;
      let tagName = dom.tagName.toLowerCase();
      if (tagName != "dd") {
        return false;
      }
      this.kind = dom.getAttribute("data-type");
      // 动态获取数据 ajax请求
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/index/artistic.scss";
</style>